import React, { Component } from 'react';
import {
	StyleSheet, Text, View, Image, TouchableOpacity, ScrollView
} from "react-native";
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import { Common } from '../../../../component/common/Common';
import { orderStyle, commonStyle, commen } from '../_common/style';
const scale = GLOBAL.SCALE;

export class PayDetailsPage extends Component {
	static navigationOptions = ({ navigation }) => {
		let { orderType } = navigation.state.params || {}
		return {
			headerTitle: (orderType == 'P' ? '采购' : '销售') + '订单-结算明细',
			headerTintColor: '#272727',
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#272727' />,
			headerRight: (<Image style={{ marginLeft: 18 * scale, width: 9 * scale, height: 16 * scale }} source={require('../../../../imgs/goBackEmpty.png')} />),
			headerTitleStyle: {
				flex: 1,
				textAlign: 'center'
			},
			headerStyle: {
				elevation: 0,
				backgroundColor: '#F5F5F5',
				borderBottomWidth: 0,
			},
		}
	};

	constructor(props) {
		super(props);
		let { orderType } = this.props.navigation.state.params || {}
		console.log('页面传递参数', orderType)
		this.state = {

		}
	}

	async	componentWillMount () {

	}

	componentWillUnmount () {

	}

	//初始调用
	_init = () => {

	}


	render () {
		return (
			<View style={styles.container}>
				<View style={styles.detailsHead}>
					<View style={[commonStyle.row2, styles.headPd]}>
						<Text style={styles.detailsHeadTitle}>入库单 F200786928</Text>
						<Text style={styles.detailsHeadStatus}>已完成</Text>
					</View>
					<View style={commonStyle.row2}>
						<View style={{ flex: 1 }}>
							<Text style={[orderStyle.lable, { textAlign: 'left', paddingBottom: 5 * scale }]}>结算量</Text>
							<Text style={orderStyle.value}>100,000吨</Text>
						</View>
						<View style={{ flex: 1 }}>
							<Text style={[orderStyle.lable, { textAlign: 'left', paddingBottom: 5 * scale }]}>结算总额</Text>
							<Text style={orderStyle.value}>¥368,000元</Text>
						</View>
					</View>
				</View>
				<ScrollView style={{ flex: 1 }}>
					<View style={styles.itemBox}>
						<Text style={styles.itemNo}>收货单398475397459</Text>
						<View style={[styles.itemBody]}>
							<View style={[commonStyle.row2, styles.headPd]}>
								<Text style={styles.detailsHeadTitle}>商品名称</Text>
							</View>
							<View style={[commonStyle.row3, { marginBottom: 15 * scale }]}>
								<View style={{ flex: 1 }}>
									<Text style={[orderStyle.lable, { textAlign: 'left', paddingBottom: 5 * scale }]}>收获量</Text>
									<Text style={orderStyle.value}>500吨</Text>
								</View>
								<View style={{ flex: 1 }}>
									<Text style={[orderStyle.lable, { textAlign: 'left', paddingBottom: 5 * scale }]}>结算量</Text>
									<Text style={orderStyle.value}>500吨</Text>
								</View>
								<View style={{ flex: 1 }}>
									<Text style={[orderStyle.lable, { textAlign: 'left', paddingBottom: 5 * scale }]}>结算单价</Text>
									<Text style={orderStyle.value}>¥500元/吨</Text>
								</View>
							</View>
							<View style={[commonStyle.row3, { marginBottom: 15 * scale }]}>
								<View style={{ flex: 1 }}>
									<Text style={[orderStyle.lable, { textAlign: 'left', paddingBottom: 5 * scale }]}>收获量</Text>
									<Text style={orderStyle.value}>500吨</Text>
								</View>
								<View style={{ flex: 1 }}>
									<Text style={[orderStyle.lable, { textAlign: 'left', paddingBottom: 5 * scale }]}>结算量</Text>
									<Text style={orderStyle.value}>500吨</Text>
								</View>
								<View style={{ flex: 1 }}>
									<Text style={[orderStyle.lable, { textAlign: 'left', paddingBottom: 5 * scale }]}>结算单价</Text>
									<Text style={orderStyle.value}>¥500元/吨</Text>
								</View>
							</View>
							<Text style={styles.itemTole}>合计: 结算量300吨, 总额¥6800元</Text>
						</View>
					</View>
					<View style={styles.itemBox}>
						<Text style={styles.itemNo}>收货单398475397459</Text>
						<View style={[styles.itemBody]}>
							<View style={[commonStyle.row2, styles.headPd]}>
								<Text style={styles.detailsHeadTitle}>商品名称</Text>
							</View>
							<View style={[commonStyle.row3, { marginBottom: 15 * scale }]}>
								<View style={{ flex: 1 }}>
									<Text style={[orderStyle.lable, { textAlign: 'left', paddingBottom: 5 * scale }]}>收获量</Text>
									<Text style={orderStyle.value}>500吨</Text>
								</View>
								<View style={{ flex: 1 }}>
									<Text style={[orderStyle.lable, { textAlign: 'left', paddingBottom: 5 * scale }]}>结算量</Text>
									<Text style={orderStyle.value}>500吨</Text>
								</View>
								<View style={{ flex: 1 }}>
									<Text style={[orderStyle.lable, { textAlign: 'left', paddingBottom: 5 * scale }]}>结算单价</Text>
									<Text style={orderStyle.value}>¥500元/吨</Text>
								</View>
							</View>
							<Text style={styles.itemTole}>合计: 结算量300吨, 总额¥6800元</Text>
						</View>
					</View>
				</ScrollView>
			</View >
		)
	}
}


const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#F5F5F5'
	},
	detailsHead: {
		...commen.edge
	},
	detailsHeadTitle: {
		fontSize: 14 * scale,
		color: style.color.font1
	},
	detailsHeadText: {
		fontSize: 14 * scale,
		color: style.color.font1
	},
	detailsHeadStatus: {
		fontSize: 14 * scale,
		color: style.color.font1
	},
	headPd: {
		paddingTop: 8 * scale,
		paddingBottom: 15 * scale,
	},
	itemBox: {
		...commen.edge,
		marginTop: 20 * scale
	},
	itemNo: {
		color: style.color.fontBlue,
		fontSize: 14 * scale
	},
	itemBody: {
		backgroundColor: style.color.white,
		borderRadius: 4 * scale,
		paddingTop: 15 * scale,
		paddingBottom: 15 * scale,
		marginTop: 5 * scale,
		...commen.edge,
	},
	itemTole: {
		textAlign: 'right',
		color: style.color.fontRed1,
		fontSize: 13 * scale
	}
})